<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    
    <!-- 这里babel标签,在解析时会对其进行编译转化 -->
    <script type="text/babel">
     

class HelloComponent0 extends React.Component{

  constructor(props) {
          super(props)
      
  }

  componentDidMount(){
    // props 是父组件传入的参数
    this.props.log('HelloComponent0 componentDidMount()');
  }
  componentWillUnmount (){
    console.log('组件卸载咯-0');
    this.props.log('HelloComponent0 componentWillUnmount()');
  }
  render(){
    // 一个简单的 div, 和它的文字内容
    return (
      <div className="hello-component-0">
        this.state.i % 3 === 0 is true
      </div>
    );
  }
}

// 复制上面的代码, 改一点文案 lol
class HelloComponent1 extends React.Component{
  componentDidMount(){
    this.props.log('HelloComponent1 componentDidMount()');
  }
  componentWillUnmount (){

    console.log('组件卸载咯-1');
    this.props.log('HelloComponent1 componentWillUnmount()');
  }
  render(){
    return (
      <div className="hello-component-1">
        this.state.i % 2 === 0 is false
      </div>
    );
  }
}

/*
 * 再定义父组件 HelloWorld
 */

class HelloWorld extends React.Component{

  // 注意这里的 state, 表示 react 组件自己的状态
  state = {
    i: 0,
    logs: []
  };

  constructor(props) {
          super(props)
      this.state.logs.push(      <p className='log'>
        
           {this._date() + ' > ' + "init"}
          </p>)
  
  }

  // 用户点击 button 时的回调，使 state.i 自增
  onButtonClick = ()=>{

    this.state.i += 1;

    this.log('click, i:' + this.state.i);

    /*
     * 修改了状态，调用 .setState() 触发 render()
     * 注意：这里是一个代码上简化的做法，实际上关于
     *       .setState()/Immutable/shouldComponentUpdate()/
     *       render() 他们之间的关系，请查看文档
     */
     
    this.setState({
      i: this.state.i,
     
    });
  
  };

  // 打log
  componentDidMount(){

    this.log('app mounted, i:' + this.state.i)
  }

  render(){
    return (
      <div>

        {/* 一个 button 用于点击*/}
        <button
          onClick={this.onButtonClick}
          >
            click me
        </button>

        {/* 根据 this.state.i % 2 === 0 的值判断
          * 加载 HelloComponent0 或 HelloComponent1 */}
        {
          this.state.i % 2 === 0 ? 
            <HelloComponent0
                log={this.log}
              /> :
            <HelloComponent1
                log={this.log}
              />
        }
        
        <ul>
        {this.state.logs.map((i,index)=>{
          return <li key={index}>{i}</li>
        })}
        </ul>
        
       
      </div>
    )
  }

  // 日志函数
  log = (text)=>{
    //console.log(text);
    this._createLog(text);
  };

  // 日期格式化
  _date(){
    return Date().replace(/^.*?(\d+:\d+:\d+).*?$/, '$1');
  }

  // 这里又用到 state 了，每次 _createLog() 被调用时，增加一条记录
  _createLog(text){
    
    this.state.logs.unshift(
     <p className='log'>
        
         {this._date() + ' > ' + text}
      </p>
    );
    
    var logs = this.state.logs;
 
    this.setState({
      logs: logs
    });
  }
}

// 在 #container 上渲染 HelloWorld 组件
ReactDOM.render(<HelloWorld />, document.getElementById('example'));
    </script>
  </body>
</html>
